<template>
  <div class="box-border eq-info">
    <a-carousel
      autoplay
      class="carousel-con"
      :autoplaySpeed="autoplaySpeed"
      dot-position="top"
      effect="fade"
    >
      <div
        v-for="(item, index) in imgList"
        class="imgList"
        :key="index"
        style="height:100%"
      >
        <img :src="require(`../../assets/dv_img/${item}`)" />
      </div>
    </a-carousel>
    <div class="eq-explain">
      <p class="eq_tit">
        <span>{{ eqname ? eqname : '' }}</span>
      </p>
      <p class="eq_con" style=" -webkit-box-orient: vertical;">
        {{ description ? description : '' }}
      </p>
    </div>
  </div>
</template>

<script>
const imgD = require('../../assets/dvImgList.json')
export default {
  data() {
    return {
      imgList: [],
      isShow: false,
    }
  },
  props: {
    eqname: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.imgList = imgD[this.eqname]
  },
  computed: {
    autoplaySpeed() {
      return 1500
    },
  },
  created() {},
  watch: {
    eqname(val) {
      if (val) {
        this.$nextTick(() => {
          this.imgList = imgD[val]
        })
      }
    },
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.eq-info {
  height: 100%;
  box-sizing: border-box;
}
.carousel-con {
  height: 30vh;
  padding: 15px;
  padding-bottom: 0px;
  img {
    height: 28vh;
  }
}
.imgList {
  // border: 2px solid rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(4, 62, 168, 0.5);
  border-radius: 2px;
}
.eq-explain {
  height: 20vh;
  padding: 15px;

  color: rgba(255, 255, 255, 0.6);
  .eq_tit {
    .px2font(16);
    text-align: center;
    color: #fff;
    letter-spacing: 1px;
  }
  .eq_con {
    .px2vh(padding-top, 5);
    color: #e8e8e8;
    .px2font(13);
    .px2vh(line-height, 24);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;
    text-align: left;
  }
}
</style>
